import 'cube.css/src/scss/neat.scss'
import 'static/font/iconfont.css'
import 'element-ui/lib/theme-default/index.css'
import '@/base/scss/common.scss'
import './poster.scss'
import Vue from 'vue'
import ElementUI from 'element-ui'
import UnifyHeader from 'components/header/header'
import UnifyFooter from 'components/footer/footer'
import Suspension from 'components/suspension/suspension'
import Api from '@/api.js'
import Utils from '../../components/component/util'
import mixins from '@/mixins'
import {DEVELOPMENT, PRODUCTION} from "../../config"

let apiHost = process.env.NODE_ENV === 'development' ? DEVELOPMENT : PRODUCTION

Vue.mixin(mixins)
Vue.use(ElementUI)
Vue.use(Utils)  // 工具函数
//eslint-disable-next-line no-new
new Vue({
  el: '#app',
  data: {
    showSuspensionHeight: 0, // 显示悬浮组件的高度
    picturePrefix: `http://${apiHost.IMAGE_API_HOST}/`,
    frameSize: {}, //框画的尺寸
    frameTypeData: {}, //框画的类型数据
    frameShowBool: true, //true不选择框画尺寸是显示的dome   -false时候显示选择尺寸dome
    nowSize: '', //当前框的尺寸
    nowType: '', //当前框的类型
    skuCode: '', //用来取价钱的sku
    price: '', //框画的价钱
    sizeIdx: 0,
    previewImageUrl: '', //框形预览图
    frameType: '', //框形
    skuId: '', //产品的skuid
    editImageUrl: '', //编辑框背景图
    templateCode: '', //产品的模板号
    isShowImg: false,
    picSize: ''
  },
  methods: {
    suspendPackUp: function () {
      let $el = this.$refs.suspend.$el
      $el.style.height = '38px'
      setTimeout(() => {
        $el.removeAttribute('style')
      }, 20)
    },
    suspendPullDown: function () {
      let $el = this.$refs.suspend.$el
      $el.style.height = '154px'
    },
    /**
     * 点击更新框画尺寸
     * index: 点击对象的索引
     */
    updateSizeFn(index) {
      if (this.frameShowBool) {
        this.frameShowBool = false
      }
      this.dynamicAlterUrl({size: index})
      this.isShowImg = true
      this.nowSize = this.frameSize[index]
      this.updataSkuData()
      return true
    },
    /*更新sku*/
    updataSkuData() {
      this.skuCode = `${this.getFromSession("category")}.${this.nowSize.code}`
      Api.sku.querySku({
        category: this.getFromSession("category"),
        parameter: this.skuCode
      }).then(res => {
        this.previewImageUrl = res.data.previewImageUrl //框形预览图
        this.editImageUrl = res.data.editImageUrl //编辑框背景图
        this.price = res.data.price
        this.templateCode = res.data.templateCode
        this.skuId = res.data.skuId
        this.picSize = res.data.picSize
      })
    },
    /*开始定制*/
    startCustom() {
      if (this.frameShowBool) {
        this.$message({
          showClose: true,
          iconClass: "atrup_Message",
          message: '请先选择您需要定制的尺寸 !',
          type: 'success'
        })
        return
      }
      if (localStorage.getItem("userDbId")) {
        location.href = '/poster/posterEdit?' + this.convertParams({
          size: this.nowSize.code,
          price: this.price,
          frameType: this.frameType,
          category: this.getFromSession('category'),
          skuCode: this.skuCode,
          templateCode: this.templateCode,
          skuId: this.skuId,
          picSize: this.picSize
        })
      } else {
        this.setUrlCallback()
      }
    },
    _getAttributes: function () {
      let that = this
      Api.sku.queryAttributes({
        category: this.getFromSession('category')
      }).then(res => {
        if (!res) {
          return
        }
        this.frameSize = res.data.attributes[0].attributeValues
        this.sizeIdx = +this.getQueryString('size', -1)
        setTimeout(function () {
          if (that.sizeIdx >= 0) {
            that.updateSizeFn(that.sizeIdx)
            return
          }
          that.nowSize = that.frameSize[0]
          that.updataSkuData()
        }, 20)
      })
    }
  },
  mounted() {
    let that = this
    sessionStorage['urlQuery'] = JSON.stringify({
      category: this.getQueryString('category', 'haibao'),
      defDbId: this.getQueryString('defDbId', 'd6e44ca4-511f-41d5-87df-d8d75a491c09')
    })
    this._getAttributes()
    this.$nextTick(function () {
      that.showSuspensionHeight = that.$refs.showSuspensionFlag.offsetTop
    })
  },
  created: function () {
    document.body.style.cssText = 'opacity:1;'
  },
  components: {
    UnifyHeader,
    UnifyFooter,
    Suspension
  }
})

